<template>
  <div class="container">
    <!-- 短信配置 -->
    <el-tabs class="tabs-borderCard" v-model="activeName">
      <el-tab-pane label="短信签名" name="one">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" >新增</el-button>
          </el-form-item>
        </el-form>
        <!-- /查询条件 -->
        <PagesTable :tableHeader="tableHeader" :tableData="tableData" :tableOperation="tableOperation"
          :tablePagination="tablePagination" @pageSize="pageSizeChange" @currentPage="currentPageChange"
          @pageOperation="handlePageOperation" />
      </el-tab-pane>
      <el-tab-pane label="短信模板" name="two">
        <!-- 查询条件 -->
        <el-form :inline="true" class="tableSearchBox" size="medium">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus">新增</el-button>
          </el-form-item>
        </el-form>
        <!-- /查询条件 -->
        <PagesTable :tableHeader="tableHeader2" :tableData="tableData2" :tableOperation="tableOperation2"
          :tablePagination="tablePagination2" @pageSize="pageSizeChange2" @currentPage="currentPageChange2"
          @pageOperation="handlePageOperation2" />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        activeName:"one",
        tableHeader: [
          {
            name: "ID",
            mark: "id",
            minWidth: "90"
          },{
            name: "内容",
            mark: "id",
            minWidth: "90"
          }, {
            name: "状态/原因",
            mark: "id",
            minWidth: "90"
          },{
            name: "申请时间",
            mark: "id",
            minWidth: "90"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "90"
          },
        ],
        tableOperation: [{
            name: "编辑",
            mark: "edit",
            icon: true
          },
          {
            name: "删除",
            mark: "delete",
            icon: true
          },
        ],
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [],
        tableHeader2: [
          {
            name: "ID",
            mark: "id",
            minWidth: "90"
          }, {
            name: "模板类型",
            mark: "id",
            minWidth: "90"
          }, {
            name: "模板名称",
            mark: "id",
            minWidth: "90"
          }, {
            name: "内容",
            mark: "id",
            minWidth: "90"
          }, {
            name: "状态/原因",
            mark: "id",
            minWidth: "90"
          },{
            name: "申请时间",
            mark: "id",
            minWidth: "90"
          },
          {
            name: "操作",
            mark: "",
            minWidth: "90"
          },
        ],
        tableOperation2: [{
            name: "编辑",
            mark: "edit",
            icon: true
          },
          {
            name: "删除",
            mark: "delete",
            icon: true
          },
        ],
        tablePagination2: {
          show: true,
          current: 1,
          size: 10,
          total: 1
        },
        tableData2: [],
      }
    },
    mounted() {
      
    },
    beforeDestroy() {
    },
    created() {
    },
    methods: {
      getData() {},
      pageSizeChange(data) {
        const self = this
        self.tablePagination.size = data
        self.getData()
      },
      currentPageChange(data) {
        const self = this
        self.tablePagination.current = data
        self.getData()
      },
      getData2() {},
      pageSizeChange2(data) {
        const self = this
        self.tablePagination2.size = data
        self.getData2()
      },
      currentPageChange2(data) {
        const self = this
        self.tablePagination2.current = data
        self.getData2()
      },
      handlePageOperation(row, mark) {
        const self = this;
        if (mark == "edit") {
          //给表单赋值......
        } else if (mark == "delete") {
          this.$confirm('确定要删除此记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delectById(row.id);
          }).catch(() => {});
        }
      },
      delectById(id){},
      handlePageOperation2(row, mark) {
        const self = this;
        if (mark == "edit") {
          //给表单赋值......
        } else if (mark == "delete") {
          this.$confirm('确定要删除此记录吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delectById2(row.id);
          }).catch(() => {});
        }
      },
      delectById2(id){},
    }
  }

</script>
<style lang="scss" scoped>

</style>